<template>
  <div ref="dialogWrap" class="dialog-wrap" v-if="isShow">
  <section class="page">
    <div class="head-wrap">
      <div class="header">
        <div @click="back()" class="back"><span class="arrow"></span></div>
        <div class="title">选择人员</div>
        <div class="btn">
          <div class="inner">
            <slot name="btn"></slot>
          </div>
        </div>
      </div>
    </div>
    <section>

    </section>

      <!--支部成员-->
      <section class="d-scroll mgt-2">
        <section class="people-list ">
          <div @click="select(item)" v-for="item in list" class="people-item block noborder">
            <section class="people-info">
              <div class="avatar-img">
                <img src="../../../../static/images/default.jpg" alt="">
              </div>
              <span class="name">{{item.userName}}</span>
            </section>
            <span class=""><span :class="{'icon-radio-checked':selectedIndexOf(item)>=0}" class="icon-radio"></span></span>
          </div>

        <p class="pdv-9"></p>
        <p class="pdv-9"></p>
        </section>
      </section>

      <section class="foot-action">
        <div class="inner">
          <span @click="checkAll()" class="text"><span :class="{'icon-radio-checked':checkedList.length==list.length}" class="icon-radio"></span> <span>&nbsp;全选</span></span>
          <div class="btn" @click="save()">
            <div class="default-block-btn">确定</div>
          </div>
        </div>
      </section>
  </section>
  </div>
</template>


<script>
  import _ from 'lodash'
  export default {
    name: 'personSelect',
    data () {
      return {
        modelName: '',
        options: {
          pullUpLoad: true,
          scrollbar: false
        },
        pageIndex: 1,
        pageSize: 100,
        list: [],
        checkedList: [],
        isShow: false
      }
    },
    created () {
      this.loadData()
    },
    methods: {
      show () {
        this.isShow = true
      },
      back () {
        this.isShow = false
      },
      save () {
        this.$emit('onSelect', this.checkedList)
        this.back()
      },
      loadData () {
        if (this.$store.state['checkedList' + this.modelName]) {
          this.checkedList = this.$store.state['checkedList' + this.modelName]
        }
        let data = {
          loginId: '3750'
        }
        this.fetchService.findDzbUserList(data).then(res => {
          console.log(res)
          this.list = res.data
        })
      },
      checkAll () {
        if (this.checkedList.length === this.list.length) {
          this.checkedList = []
        } else {
          this.checkedList = [].concat(this.list)
        }
      },
      selectedIndexOf (item) {
        let index = -1
        this.checkedList.some((v, i) => {
          if (item.id === v.id) {
            index = i
            return false
          }
        })
        return index
      },
      select (item) {
        let index = this.selectedIndexOf(item)
        if (index >= 0) {
          this.checkedList.splice(index, 1)
        } else {
          this.checkedList.push(item)
        }
      }
    }
  }
</script>

<style scoped>

</style>
